<template>
    <div class="detail-service">
        <ul class="detail-service-ul">
            <li :class="[userObj.serverName == item.serverName ? 'active' : '']" v-for="(item,index) in userObj.serviceLogo" :key="index" @click="detailClick(item.serverId),goodsId = item.serverAuthId,commentList=[],totalComment=0,serviceTime = 1">
                {{item.serverName}}
                <i v-if="userObj.serverName == item.serverName"></i>
            </li>
        </ul>
        <div>
            <div class="detail-service-box clearfix">
                <div class="login-detail" v-for="(item,index) in userObj.serviceLogo" :key="index">
                    <img v-if="userObj.serverName == item.serverName" class="service-img" :src="$imgPath(item.pcServer)" alt="">
                </div>
                <div class="service-box">
                    <div class="service-price">
                        <div class="service-zhe">
                            <em>￥</em>
                            <em>{{userObj.price}}</em>
                            <em>/{{userObj.priceUnit}}</em>
                        </div>
                        <span class="serivce-dw">{{userObj.division}}</span>
                        <span class="serivce-time"> 接单时长：24小时</span>
                    </div>
                    <div class="serivce-yuyin" @click="viceoPlay()">
                        {{userObj.audioTime}}
                        <audio id="audioPlay" :src="$imgPath(userObj.audioUrl)" controls></audio>
                    </div>
                    <div class="service-num">
                        <span>数量</span>
                        <div class="input-box-num">
                            <input type="text" v-model="serviceTime">
                            <div class="num-suan">
                                <em @click="timeJia()">+</em>
                                <em @click="timeJian()">-</em>
                            </div>
                        </div>
                    </div>
                    <div class="xiandan-box" v-if="meDetail">
                        <span @click="placeOrder()">立即下单</span>
                        <span @click="chat()">对话</span>
                    </div>
                </div>
            </div>
            <div class="detail-ziwo">
                <p>自我介绍</p>
                <span>
                    {{userObj.descript}}
                </span>
            </div>
            <div class="service-common">
                <div class="common-tit">
                    <span>评价</span>
                    <span>
                        <em>综合评分：</em>
                        <Rate disabled v-model="bigStar" />
                    </span>
                </div>
                <div class="common-bq">
                    <p class="common-biaoqian">TA的印象标签</p>
                    <p class="common-bqNr">
                        <span v-for="(item,index) in commentTags" :key="index"><em>{{item.name}}</em><em>({{item.count}})</em></span>
                    </p>
                </div>
                <div class="common-box clearfix">
                    <div class="common-list clearfix" v-for="(item,index) in commentList" :key="index">
                        <img class="common-pic" :src="$imgPath(item.user.headImg)" alt="">
                        <div class="common-nr">
                            <p class="common-name">
                                <span>{{item.user.nickname}}</span>
                                <span>
                                    <Rate disabled v-model="item.rank" />
                                </span>
                            </p>
                            <p class="common-p">{{item.content}}</p>
                            <p class="common-p">{{$time1(item.createTime)}}</p>
                        </div>
                    </div>
                </div>
                <Page v-if="totalComment>0" :total="totalComment" show-elevator />
            </div>
        </div>
       <Modal v-model="chatBox" class="chatOrder" :footer-hide="true" width="700">
            <chat ref="children" :toCode="userObj.code" :toName="userObj.nickName" :toUserImg="userObj.headImg" :toUserId="userObj.userId" :detailObj="userObj"></chat>
        </Modal>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import chat from '../common/chat'
export default {
    props:["userObj","userId","meDetail"],
    data(){
        return{
            commentTags:[],     // 评价标签列表
            bigStar:0,          // 评价星
            totalComment:0,    // 评价总数量    
            commentList:[],     // 评论列表
            serviceTime:1,      // 下单时长,
            serverLogo:'',      // 服务logo
            djsTime:'',         // 倒计时变量
            chatBox:false,
        }
    },
    components:{
        chat
    },
    watch:{
        userObj(newVal,oldVal){
            if(newVal.serviceLogo.length > 0){
                for(let i in newVal.serviceLogo){
                    if(newVal.serverName == newVal.serviceLogo[i].serverName){
                        this.serverLogo = newVal.serviceLogo[i].serverLogo
                    }
                }
            }
            this.rankList()
        },
        chatBox(newVal,oldVal){
            if(newVal == false){
                this.$refs.children.clearChatList()
            }else{
                setTimeout(()=>{
                    this.$refs.children.listByChat()
                },500)
            }
        },
        serviceTime(newVal,oldVal){
            if(newVal >=23){
                this.serviceTime = 23
            }
        }
    },
    methods:{
        // 服务切换
        detailClick(id){
            clearInterval(this.djsTime)
            this.userObj.audioUrl = ''
            this.$emit('detailService',id)
        },
        // 语音播放
        viceoPlay(){
            let self = this
            let audio = document.getElementById('audioPlay')
            let time = self.userObj.audioTime
            if(audio.paused)                     {                 
                audio.play() // 这个就是播放  
                self.djsTime = setInterval(()=>{
                    self.userObj.audioTime--
                    if(self.userObj.audioTime == 0){
                        clearInterval(self.djsTime)
                        self.userObj.audioTime = time
                    }
                },1000)
            }else{
                clearInterval(self.djsTime)
                audio.pause()// 这个就是暂停
            }
        },
        // 评价+评论
        // 评价总评星和评价标签
        rankList(){
            let params = {
                sellerId:this.userId,
                goodsId:this.userObj.serverAuthId
            }
            apiHttp.apiDetail.rankList(params,resp=>{
                if(resp.code == 200){
                    this.bigStar = Number(resp.data.totalRank.toFixed())
                    this.commentTags = resp.data.totalTags
                    if(this.commentTags.length>0){
                        this.pwComment(resp.data.totalTags[0].id)
                    }
                }
            })
        },
        // 陪玩的评价
        pwComment(id){
            let params = {
                tagsId: id,
                sellerId:this.userId,
                goodsId:this.userObj.serverAuthId
            }
            apiHttp.apiDetail.pwComment(params,resp=>{
                if(resp.code == 200) {
                    for(let i in resp.data.content){
                        resp.data.content[i].rank = Number(resp.data.content[i].rank)
                    }
                    this.commentList = resp.data.content
                    this.totalComment = resp.data.totalElements
                }
            })
        },
        // 下单时间+
        timeJia(){
            this.serviceTime++
        },
        // 下单时间-
        timeJian(){
            if(this.serviceTime != 1){
                this.serviceTime--
            }
        },
        // 立即下单
        placeOrder(){
            let routeData = this.$router.resolve({
                path:'/placeOrder',
                query:{
                    name:this.userObj.nickName,
                    serverName:this.userObj.serverName,
                    division:this.userObj.division,
                    price:this.userObj.price,
                    serviceTime:this.serviceTime,
                    headImg:this.userObj.headImg,
                    serverLogo:this.serverLogo,
                    serverAuthId:this.userObj.serverAuthId,
                    userId:this.userId
                }
            })
            window.open(routeData.href, '_blank')
        },
        chat(){
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        this.chatBox = true
                    }else{
                        this.$Message.warning('请您先登陆')
                    }
                }
            })
        }
    }
}
</script>
